<template>
  <div>
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="担保客户查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-plus" @click="handleEdit()">新增</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" class="table-sm" :columns="tableColumns" :data="tableData">
      <template v-slot:status="scope">
        <span class="badge" :class="`badge-${scope.row.itemStyle}`">
          {{ scope.row.itemStatus }}
        </span>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <project-new-dialog
      :visible.sync="editVisible"
      :table-id="tableId"
      :form-data="formData"
      :title="editTitle"
      @success="handleSuccess"
    ></project-new-dialog>

    <project-view-dialog
      :visible.sync="viewVisible"
      :batch-no="viewAttachNo"
      :tab-name="viewTabName"
      :query-id="queryId"
    ></project-view-dialog>
  </div>
</template>

<script>
import ProjectNewDialog from '@/bank/views/fast/new/ProjectNewDialog'
import ProjectViewDialog from '@/bank/views/fast/ProjectViewDialog'

import { fastParams } from '@/bank/views/fast/index'

const enumApproveStatus = {
  0: '未受理',
  1: '已受理',
}
const enumApproveStyle = {
  0: 'warning',
  1: 'success',
}

export default {
  components: {
    ProjectNewDialog,
    ProjectViewDialog,
  },
  mixins: [fastParams],
  data() {
    return {
      batchKey: 'customer_related_quick_batch_id',
      loading: false,
      order: {
        create_time: 'desc',
      },
      params: {
        index: 1,
        size: 10,
      },
      tableName: 'customer_related_quick',
      tableData: [],
      tableColumns: [
        { attrs: { label: '借款人', prop: 'customer_name', width: 100 } },
        { attrs: { label: '组织类型', prop: 'org_class_name' } },
        { attrs: { label: '证件号', prop: 'customerNo', width: 120 } },
        { attrs: { label: '经营年限', prop: 'plant_year' } },
        { attrs: { label: '经营规模', prop: 'plant_area' } },
        { attrs: { label: '授信金额', prop: 'apply_funds' } },
        { attrs: { label: '资金用途', prop: 'funds_use_dir', width: 120 } },
        { attrs: { label: '本次支用金额', prop: 'cur_use_funds' } },
        { attrs: { label: '贷款(支用)期限', prop: 'months' } },
        { attrs: { label: '贷款利率', prop: 'load_rate' } },
        { attrs: { label: '担保费率', prop: 'gua_rate' } },
        { attrs: { label: '保费金额(元)', prop: 'gua_fee' } },
        { attrs: { label: '贷款开始时间', prop: 'load_date', width: 100 } },
        { attrs: { label: '贷款结束时间', prop: 'load_end_date', width: 100 } },
        { attrs: { label: '添加日期', prop: 'createTime', width: 90 } },
        { attrs: { label: '受理状态', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '操作', align: 'center', width: 100, fixed: 'right' },
          operations: [
            {
              content: '项目立项',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              attrs: { class: 'p-0 m-2' },
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
              attrs: { class: 'p-0 m-2' },
            },
          ],
        },
      ],
      totalCount: 0,

      editVisible: false,
      tableId: '',
      formData: {},
      editTitle: '',

      viewVisible: false,
      queryId: '',
      viewTabName: 'detail',
      viewAttachNo: '',
    }
  },

  created() {},
  watch: {
    status: {
      handler: function (val) {
        this.params = { ...this.params, ...this.baseParams }
        this.params['channel_claim_status.eq'] = +val === 1 ? 0 : ''
        this.getData()
      },
      immediate: true,
    },
  },
  methods: {
    handleSuccess() {
      this.getData()
      this.$store.dispatch('getTaskCountSimple', this.productId)
    },
    handleView(row = {}) {
      this.queryId = row.customer_related_id || ''
      this.viewAttachNo = row[this.batchKey]
      this.viewTabName = 'detail'
      this.viewVisible = true
    },
    handleEdit(row = {}) {
      this.editVisible = true
      this.tableId = row.customer_related_id || ''
      this.formData = { ...row }
      this.editTitle = this.tableId ? '项目受理' : '项目新增'
    },
    getData(index = 1) {
      this.loading = true
      this.params.index = index
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.totalCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.createTime = this.$utils.dateFormat(item.create_time, 'yyyy-MM-dd hh:mm')
      item.customerNo = +item.customer_type === 1 ? item.register_no : item.lender_idcard
      item.itemStatus = enumApproveStatus[item.channel_claim_status]
      item.itemStyle = enumApproveStyle[item.channel_claim_status]
      return item
    },
  },
}
</script>
<style lang="scss" scoped></style>
